import {Button, Form, Input } from 'antd';
import {connect, FormattedMessage} from 'umi';
import React, {Component} from 'react';
import styles from './config.less';

class OAuth2Config extends Component {
  view = undefined;

  componentDidMount() {
    const {oauthType, dispatch} = this.props;
    dispatch({
      type: 'oauth2/fetchConfig',
      payload: {oauthType}
    });
  }

  updateCurrent = () => {
    const {dispatch, oauthType} = this.props;
    dispatch({
      type: 'oauth2/fetchConfig',
      payload: {oauthType},
    });
  };

  getViewDom = (ref) => {
    this.view = ref;
  };

  handleFinish = (values) => {
    const {dispatch} = this.props;
    dispatch({
      type: 'oauth2/saveOAuthConfig',
      payload: values,
      callback: (res) => {
        if (res && res.data) {
          if (res.data === 'ok')
            this.updateCurrent();
        }
      }
    });
  };

  render() {
    const {wechat, qq, weibo, oauthType, configLoading} = this.props;

    let initValues;
    if (oauthType === 'wechat') {
      initValues = wechat;
    } else {
      initValues = oauthType === 'qq' ? qq : weibo;
    }
    return (!configLoading &&
      <div className={styles.baseView} ref={this.getViewDom} >
        <div className={styles.left}>
          <Form
            layout="vertical"
            onFinish={this.handleFinish}
            initialValues={{...initValues, oauthType}}
            hideRequiredMark
          >
            <Form.Item name="oauthType" noStyle>
              <Input type="hidden" />
            </Form.Item>
            <Form.Item
              name="appId"
              label={
                <FormattedMessage
                  id="oauth.config.appId" defaultMessage="appId"
                />
              }
              rules={[
                {
                  required: true,
                  message: <FormattedMessage id="oauth.config.appId-message"
                                             defaultMessage="Please input your appId!"/>
                },
              ]}
            >
              <Input/>
            </Form.Item>
            <Form.Item
              name="appSecret"
              label={
                <FormattedMessage id="oauth.config.appSecret"
                                  defaultMessage="appSecret"/>
              }
              rules={[
                {
                  required: true,
                  message: <FormattedMessage
                    id="oauth.config.appSecret-message"
                    defaultMessage="Please input your appSecret!"/>
                },
              ]}
            >
              <Input/>
            </Form.Item>
            <Form.Item
              name="redirectUri"
              label={
                <FormattedMessage id="oauth.config.redirectUri"
                                  defaultMessage="redirectUri"/>
              }
              rules={[
                {
                  required: false,
                  message: <FormattedMessage
                    id="oauth.config.redirectUri-message"
                    defaultMessage="Please input your redirect uri!"/>
                },
              ]}
            >
              <Input/>
            </Form.Item>
            <Form.Item
              name="scope"
              label={
                <FormattedMessage id="oauth.config.scope"
                                  defaultMessage="scope"/>
              }
              rules={[
                {
                  required: false,
                  message: <FormattedMessage
                    id="oauth.config.scope-message"
                    defaultMessage="Please input your Scope!"/>
                },
              ]}
            >
              <Input/>
            </Form.Item>
            <Form.Item
              name="codeUri"
              label={
                <FormattedMessage id="oauth.config.codeUri"
                                  defaultMessage="CodeUri"/>
              }
              rules={[
                {
                  required: true,
                  message: <FormattedMessage
                    id="oauth.config.codeUri-message"
                    defaultMessage="Please input your CodeUri!"/>
                },
              ]}
            >
              <Input/>
            </Form.Item>
            <Form.Item
              name="accessTokenUri"
              label={
                <FormattedMessage id="oauth.config.accessTokenUri"
                                  defaultMessage="accessTokenUri"/>
              }
              rules={[
                {
                  required: false,
                  message: <FormattedMessage
                    id="oauth.config.accessTokenUri-message"
                    defaultMessage="Please input your Access Token Uri!"/>
                },
              ]}
            >
              <Input/>
            </Form.Item>
            <Form.Item
              name="refreshTokenUri"
              label={
                <FormattedMessage id="oauth.config.refreshTokenUri"
                                  defaultMessage="Refresh Token Uri"/>
              }
              rules={[
                {
                  required: false,
                  message: <FormattedMessage
                    id="oauth.config.refreshTokenUri-message"
                    defaultMessage="Please input your RefreshTokenUri!"/>
                },
              ]}
            >
              <Input/>
            </Form.Item>
            <Form.Item
              name="userInfoUri"
              label={
                <FormattedMessage id="oauth.config.userInfoUri"
                                  defaultMessage="User-Info Uri"/>
              }
              rules={[
                {
                  required: false,
                  message: <FormattedMessage id="oauth.config.userInfoUri-message"
                                             defaultMessage="Please input your user-info uri!"/>
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item>
              <Button htmlType="submit" type="primary">
                <FormattedMessage
                  id="oauth.config.update"
                  defaultMessage="Update Config"/>
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  }
}

export default connect(({loading, oauth2}) => ({
  wechat: oauth2.wechat,
  qq: oauth2.qq,
  weibo: oauth2.weibo,
  configLoading: loading.effects['oauth2/fetchConfig'],
}))(OAuth2Config);
